<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>天天基金助手</title>
</head>
<body style="width:480px;height:640px;">
<div id="app">
    <nav class=" sticky-top navbar navbar-expand navbar-light shadow shadow-sm" style="background-color: #b4e4ec;">
        <a class="navbar-brand" href="#">天天基金助手</a>
        <form class="form-inline">
            <div class="input-group">
                <input v-model.lazy="fundcode" class="form-control" type="search" placeholder="基金代码，如：160222">
                <div class="input-group-append">
                    <button v-on:click="findFundData" class="btn btn-outline-success" type="button">查找</button>
                </div>
            </div>
        </form>
    </nav>

    <div class="container mt-2">
        <div class="card" v-for="(item, index) in foundList" :key="item.fundcode">
            <div class="card-header">
                <h2 class="mb-0 btn-group ">
                    <button class="btn btn-light" type="button" data-toggle="collapse" v-bind:data-target="'#id' + item.fundcode">
                        {{item.name + "(" + item.fundcode + ")"}}
                    </button>
                    <button v-on:click="removeData(index)" v-bind:data-id="item.fundcode" class="btn btn-primary btn-sm btn-danger">移除</button>
                </h2>
            </div>
            <div v-bind:id="'id' + item.fundcode" class="collapse show">
                <funditem :fund="item"></funditem>
            </div>
        </div>
    </div>
    <footer class="fixed-bottom bg-secondary text-center">Power by <strong>CGQ</strong> 2020</footer>
</div>
<template id="funditem">
    <div class="card-body">
        <div class="row">
            <div class="col-4">上一日净值</div><div class="col-8">{{dwjz}} <span class="ml-3 bg-light small">{{jzrq}}</span></div>
        </div>
        <div class="row">
            <div class="col-4">当日净值估算</div><div class="col-8">{{gsz}} <span class="ml-3 bg-light small">{{gztime}}</span></div>
        </div>
        <div class="row">
            <div class="col-4">净值收益</div><div class="col-8" :class="{['text-danger']: jzProfit > 0,['text-success']: jzProfit < 0}">{{jzProfit | showPrice}}</div>
        </div>
        <div class="row">
            <div class="col-4">当日收益</div><div class="col-8" :class="{['text-danger']: profit > 0,['text-success']: profit < 0}">{{profit | showPrice}}</div>
        </div>
        <div class="row">
            <div class="col-12">
                <form class="form-inline" action="#">
                    <div class="input-group">
                        <div class="input-group-append">
                            <div class="input-group-text">买入份数</div>
                        </div>
                        <input v-model="quantity" type="number" min="0" class="form-control" placeholder="买入份数">
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script src="js/vue.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/popup.js"></script>
</body>
</html>